<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据校验</title>
</head>
<body>
<div id="valid_demo">
    <valid-demo prop-a="1" prop-d="1" prop-f="1"></valid-demo>
</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
    Vue.component('valid-demo', {
        props: {
            //必须是数字类型
            propA: Number,
            //必须是字符串或者数字类型
            propB: [String, Number],
            //布尔值，如果没有定义。默认值是true
            propC: {
                type: Boolean,
                default: true
            },
            //    数字，而且是必传
            propD: {
                type: Number,
                required: true
            },
            //    如果是数组或者对象，默认值必须由一个函数来返回
            propE: {
                type: Array,
                default: function () {
                    return [];
                }

            },
            propF: {
                validator: function (value) {
                    return value > 10;
                }
            }
        },
        // 可以验证的type是：String,Number,Boolean,Object,Array,Function. type也可以是一个自定义构造器，使用instanceof检测。
        template:'<div>这是一个组件:{{this.propF}}</div>'
    });

    new Vue({
        el:'#valid_demo'
    })

</script>
</body>
</html>